<template>
  <div>
    <div>
      <el-row>
        <el-col :span="24">
          <label class="durg_title">零售药品</label>
        </el-col>
      </el-row>
      <el-row style="margin:10px 0px;display:inline-block;width:100%;">
        <el-col :span="6">
          <label style="font-size:16px;">收费信息</label>
        </el-col>
        <el-col style="height:10px;" :span="6"></el-col>
        <el-col style="height:10px;" :span="6"></el-col>
        <el-col style="height:10px;" :span="6">
          <el-button @click="opReturn()" style="float:right;">{{return_label}}</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <table class="table-box">
            <thead>
              <tr>
                <th v-if="isReturn==true">
                  <el-checkbox
                    :indeterminate="isIndeterminate"
                    v-model="checkAll"
                    @change="handleCheckAllChange"
                  ></el-checkbox>
                </th>
                <th>药品名称</th>
                <th>规格</th>
                <th>零售价</th>
                <th>批号</th>
                <th>有效期</th>
                <th>数量</th>
                <th>状态</th>
                <th>单位</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in itemList" :key="index">
                <td v-if="isReturn==true && item.status==2" class="return-item_td">
                  <el-checkbox-group v-model="checkedAdmin" @change="handleCheckedCitiesChange">
                    <el-checkbox :label="item.orderItemId" :key="item.orderItemId"></el-checkbox>
                  </el-checkbox-group>
                </td>
                <td v-if="isReturn==true && item.status!==2">
                  <el-checkbox disabled></el-checkbox>
                </td>
                <td>{{item.medicalDrugRetailItem.drugName}}</td>
                <td>{{item.medicalDrugRetailItem.specs}}</td>
                <td>￥{{item.medicalDrugRetailItem.retailMoney}}</td>
                <td>{{item.medicalDrugRetailItem.lotNumber}}</td>
                <td>{{item.medicalDrugRetailItem.effectiveTime}}</td>
                <td>{{item.medicalDrugRetailItem.retailNum}}</td>
                <td>{{item.status==-1?"已退款":"已付款"}}</td>
                <td>{{item.medicalDrugRetailItem.minUnit | changeAssist(dwList)}}</td>
              </tr>
            </tbody>
          </table>
        </el-col>
      </el-row>
      <el-row v-if="returnMoney!='' && returnMoney!=0" class="money_box">
        <el-col class="other" :span="18"></el-col>
        <el-col class="money" :span="6">
          <label>退费金额：</label>
          <span>￥{{returnMoney | changeMoneyToTwo}}</span>
        </el-col>
      </el-row>
      <el-row class="money_box">
        <el-col class="other" :span="18"></el-col>
        <el-col class="money" :span="6">
          <label>费用合计：</label>
          <span>￥{{totalMoney | changeMoneyToTwo}}</span>
        </el-col>
      </el-row>
      <el-row v-if="reductionMoney!=0 && reductionMoney!=''" class="money_box">
        <el-col class="other" :span="18"></el-col>
        <el-col class="money" :span="6">
          <label>减免金额：</label>
          <span>￥{{reductionMoney | changeMoneyToTwo}}</span>
        </el-col>
      </el-row>
      <el-row
        v-for="(it,indexs) in billPayways"
        v-if="it.source!=11"
        :key="indexs"
        class="money_box"
      >
        <el-col class="other" :span="18"></el-col>
        <el-col class="money" :span="6">
          <label>{{it.source | changePaySource}}金额：</label>
          <span>￥{{it.payMoney | changeMoneyToTwo}}</span>
        </el-col>
      </el-row>
      <el-row class="money_box">
        <el-col class="other" :span="18"></el-col>
        <el-col class="money" :span="6">
          <label>实收费用：</label>
          <span>￥{{totalMoney-returnMoney | changeMoneyToTwo}}</span>
        </el-col>
      </el-row>
    </div>
    <br />
    <p v-if="!isRource" style="color:#DE6262!important;">* 该收费项目使用了医保、商保、减免、挂账和卡券支付和积分抵扣中的一种，只能全额退款</p>
    <span slot="footer">
      <el-button
        v-if="!isReturn"
        style="display:inline-block;width:100%;margin-top:10px;"
      >
        <i class="iconfont icondayin"></i>打印票据
      </el-button>
      <el-button
        v-if="isReturn"
        @click="openReturn()"
        style="display:inline-block;width:100%;margin-top:10px;"
      >
        <i class="iconfont icondayin"></i>退费
      </el-button>
    </span>
    <edit
      v-model="dialogEdit"
      v-if="dialogEdit"
      @success="onOpen"
      :total="total"
      :orderItem="checkedAdmin"
      :orderId="durg_id"
    ></edit>
    <printPay v-if="showPrint"  :item="itemList" :totalMoney="totalMoney-returnMoney"></printPay>
  </div>
</template>
<script>
import Valid from "@/_js/validate.js";
export default {
  data() {
    return {
      btnLoading: false,
      dialogEdit: false,
      detail: "",
      reductionMoney: 0, //减免金额
      itemList: [],
      billPayways: [],
      totalMoney: 0,
      dwList: [],
      checkedAdmin: [],
      checkAll: [],
      isIndeterminate: true,
      isReturn: false,
      return_label: "退费",
      returnMoney: 0,
      total: 0,
      showPrint: false,
      isRource: true
    };
  },
  mounted() {
    let th = this;
    th.verifyUrlAttack(th.$route.query).then(() => {
      th.durg_id = th.jieMi(th.$route.query.id);
      th.onOpen();
      th.getBasicData();
    });
  },
  methods: {
    onOpen() {
      let th = this;
      th.$api
        .getOrderItem({ orderId: th.durg_id })
        .then(res => {
          if (res.executed) {
            // th.detail = res.dataBody.list[0];
            let list = res.dataBody.billPayways;
            th.billPayways = res.dataBody.billPayways;
            th.returnMoney = res.dataBody.returnMoney;
            th.reductionMoney = res.dataBody.reductionMoney;
            th.itemList = res.dataBody.pageInfo.list;
            for (let i = 0; i < list.length; i++) {
              if (list[i].source == 7) {
                th.totalMoney = Number(list[i].payMoney).toFixed(2);
              }
              if (list[i].source == 11) {
                th.totalMoney = Number(th.totalMoney) - list[i].payMoney;
              }
              if (
                list[i].source == 8 ||
                list[i].source == 9 ||
                list[i].source == 10
              ) {
                th.totalMoney = Number(list[i].payMoney).toFixed(2);
              }
              // 1医保 2挂账 3商保 4.卡券 5.积分 6.余额 7.现金 8.支付宝 9.微信 10.银行卡 11.找零 12.赠送余额
              if (
                list[i].source == 1 ||
                list[i].source == 3 ||
                list[i].source == 2 ||
                list[i].source == 12 ||
                list[i].source == 4
              ) {
                th.isRource = false;
              }
            }
          } else {
            th.$message.error(res.message);
          }
        })
        .catch(error => {
          th.$message.error("获取订单详情超时！请刷新！");
        });
    },
    onClose() {
      let th = this;
      let type = th.$route.query.type;
      th.$router.push({ path: "/page/retailIndex" });
    },
    opReturn() {
      let th = this;
      th.isReturn = !th.isReturn;
      if (th.isReturn == true) {
        th.return_label = "取消退费";
      } else {
        th.return_label = "退费";
      }
    },
    openReturn() {
      let th = this;
      let num = 0;
      let list = [];
      if (!th.isRource) {
        for (let j = 0; j < th.itemList.length; j++) {
          if (th.itemList[j].status !== -1) {
            list.push(th.itemList[j].orderItemId);
          }
        }
        th.checkedAdmin = list;
      } else {
        if (th.checkedAdmin.length < 1) {
          for (let j = 0; j < th.itemList.length; j++) {
            if (th.itemList[j].status !== -1) {
              list.push(th.itemList[j].orderItemId);
            }
          }
          th.checkedAdmin = list;
        }
      }
      for (let i = 0; i < th.checkedAdmin.length; i++) {
        for (let j = 0; j < th.itemList.length; j++) {
          if (th.itemList[j].orderItemId === th.checkedAdmin[i]) {
            if (th.itemList[j].status !== -1) {
              num += Number(th.itemList[j].totalMoney);
            }
          }
        }
      }
      th.dialogEdit = true;
      th.total = num;
    },
    //获取通用配置
    getBasicData() {
      let th = this;
      th.getCommonConfigByKey("入库方式").then(res => {
        th.wayList = res;
      });
      th.getCommonConfigByKey("药品剂量单位").then(res => {
        th.dwList = res;
      });
    },
    handleCheckAllChange(val) {
      let checked = [];
      for (var i = 0; i < this.itemList.length; i++) {
        checked.push(this.itemList[i].orderItemId);
      }
      this.checkedAdmin = val ? checked : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.itemList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.itemList.length;
    },
    //打印
    doPrint() {
      let _this = this;
      _this.showPrint = true;
      window.document.body.innerHTML = document.getElementsByClassName(
        "printOrder"
      )[0].innerHTML;
      window.print();
      window.location.reload();
    }
  },
  components: {
    edit: () => import("./_com/editReturn.vue"),
    printPay:()=>import("./_print/pay")
  }
};
</script>
<style lang="scss" scoped>
.durg_title {
  display: inline-block;
  width: 100%;
  font-size: 16px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.money_box {
  margin-top: 10px;
  display: inline-block;
  width: 100%;
  .other {
    height: 10px;
    display: inline-block;
  }
  .money {
    text-align: right;
    padding-right: 10px;
    display: inline-block;
  }
}
.printOrder {
  display: inline-block;
  width: 100%;
}
</style>
